<template>
    <view class="price-container">
        <view class="price-wrap" :style="{color: color || 'unset'}">
            <!-- Prefix -->
            <template v-if="isPrefix">
                <view class="fix-pre" :style="{fontSize: minorSize}">
                    <slot name="pre">¥</slot>
                </view>
            </template>
            
            <!-- Content -->
            <view>
                <!-- Integer -->
                <text class="integer" :style="{fontSize: mainSize}">{{ integer }}</text>
                <!-- Decimals -->
                <template v-if="prec">
                    <text class="decimals" :style="{fontSize: minorSize}">{{ decimals }}</text>
                </template>
            </view>
            
            <!-- Suffix -->
            <template v-if="isSuffix">
                <view class="fix-suf" :style="{fontSize: minorSize}">
                    <slot name="suf">/天</slot>
                </view>
            </template>
        </view>
    </view>
</template>

<script>
    import { formatPrice } from '@/utils/tools.js';
    
    export default {
        name: 'price',
        
        props: {
            // 价格
            content: {
                type: String | Number,
                required: true
            },
            
            // 小数位
            prec: {
                type: Number,
                default: 2
            },
            
            // 颜色
            color: String,
            
            // 主要内容字体大小
            mainSize: {
                type: String,
                default: '46rpx'
            },
            
            // 次要内容字体大小
            minorSize: {
                type: String,
                default: '32rpx'
            },
            
            // 前缀
            isPrefix: {
                type: Boolean,
                default: false
            },
            
            // 后缀
            isSuffix: {
                type: Boolean,
                default: false
            }
        },
        
        computed: {
            // 金额整数部分
            integer() {
                return formatPrice(this.content, 'integer');
            },
            
            // 金额小数部分
            decimals() {
                return formatPrice(this.content, 'decimals', this.prec);
            }
        }
    }
</script>

<style scoped>
    .price-container {
        display: inline-block;
        color: #FF2C3C;
        line-height: 1em;
    }
    
    .price-wrap {
        display: flex;
        align-items: flex-end;
    }
    
    .fix-pre,
    .fix-suf,
    .decimals {
        font-size: 32rpx;
    }
    
    .integer {
        font-size: 46rpx;
    }
</style>
